<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
	<title>电子围栏编辑器</title>
	<!-- <link rel="stylesheet" href="css/style.css"/>  -->
	<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
	<link href="css/mui.min.css" rel="stylesheet" />
	<style>
		.amap-logo{
		    right:0 !important;
		    left:auto !important;
			visibility: hidden;
		}
		.amap-copyright{
		    right:70px !important;
		    left:auto !important;
		}
	</style>
</head>

<style>
	html,
	body,
	#container {
		width: 100%;
		height: 100%;
	}

	.input {
		outline-style: none;
		border: 1px solid #ccc;
		border-radius: 3px;
		padding: 14px 14px;
		width: 620px;
		font-size: 24px;

		-web-kit-appearance: none;
		-moz-appearance: none;
		}
		
		.amap-marker-label1{
		    width: 60px;
		    font-size: 12px;
		    line-height: 14px;
		    text-align: center;
		    height: 18px;
		    font-family: STLiti;
		    color: green;
		    border-radius: 15px;
		    background-color: rgba(255,255,255,0.4);
		    border: solid 2px rgba(100,255,200,0.8);
			position: absolute;
			top: 39px;
			left: -5px;
		}
		
		.custom-content-marker1 {
				position: absolute;
				top: -6px;
				right: -8px;
				width: 1px;
				height: 1px;
				font-size: 12px;
				background: #ccc;
				border-radius: 50%;
				color: #fff;
				text-align: center;
				line-height: 15px;
				/**box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); **/
			}
</style>


<script src="https://webapi.amap.com/maps?v=1.4.15&key=fb6c5f60fce4e3dd715a9716e7740e39&plugin=AMap.CircleEditor">
</script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script src="https://fastly.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0-0/axios.min.js"></script>
<script src="js/system/mui.min.js"></script>

<body>
	<div id="container"></div>

	<button type="button" class="mui-btn mui-btn-royal" style="width: 60px;position: absolute;top:3px;right: 5px; background-color: #FF5722;"
		onclick="Back()">返回</button>
	<div id="app">
		<button v-on:click="StartEdit" class="mui-btn mui-btn-primary"
			style="width: 80px;position: absolute;top:5px;left: 5px;background-color: #01AAED;" v-show="buttonShow"> 区域设置 </button>
		<button v-on:click="EndEdit" class="mui-btn mui-btn-primary" 
			style="width: 80px;position: absolute;top:5px;left: 5px;background-color: #01AAED;" v-show="!buttonShow">保存设置 </button>
			<button v-on:click="ReCreate" class="mui-btn mui-btn-primary" 
				style="width: 120px;position: absolute;top:5px;left: 95px;background-color: #01AAED;"> 重新生成物资 </button>
				<button id="switchMap" type="button" class="mui-btn mui-btn-primary"
					style="width: 80px;position: absolute;top:5px;left: 225px;background-color: #01AAED;" onclick="SwichMap()">卫星地图</button>
				
	</div>

	<div id="app1" class="mui-input-group"
		style="position: fixed;auto;bottom: 2px;width: 250px;left:3px; height: 90px;
		background-color: #2F4056">

		<div class="mui-input-row">
			<label style="font-size: 14px;color: #ffffff; width: 100px;">拖拽地图：</label>
			<div class="mui-switch" id="mySwitch">
				<div class="mui-switch-handle"></div>
			</div>

		</div>
		<div class="mui-input-row">
			<label style="font-size: 14px; width:calc();color: #ffffff;">半径设置(米)：</label>
			<div class="mui-content">
				
					<div class="mui-numbox" data-numbox-step='15'
					data-numbox-min='100' data-numbox-max='3000'  style="width: 135px;">
						<button class="mui-btn mui-numbox-btn-minus" type="button" v-bind:disabled="app.buttonShow">-</button>
						<input class="mui-numbox-input" 
						type="number" v-model="radius" v-bind:disabled="app.buttonShow" onchange="RadiusChange(this)"/>
						<button class="mui-btn mui-numbox-btn-plus" v-bind:disabled="app.buttonShow" type="button">+</button>
						
					</div>
				
			</div>
		</div>
	
	</div>
	<script src="js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/map/map.js"></script>
	<script src="js/fence/fence_knapsack.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/fence/fence_set.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/fence/fence.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>